<script setup lang="ts">
const {waterForm} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
}>();

</script>

<template>
  <el-card class="box-card">
    <div style="text-align: center;display: flex;align-items: center;justify-content: space-between">
      <h3>SXLPHJ/JL/CX-22-52</h3>
      <h1> 水质 生化需氧量分析原始记录(B面) </h1>
      <div></div>
    </div>
    <table class="table">
      <tr>
        <td colspan="5" style="text-align: center">
          空白检查
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td>样品编号</td>
        <td>
          BOD(mg/L)
        </td>
        <td>相对百分偏差(%)</td>
        <td>
          质控要求(%)
        </td>
        <td>
          是否合格
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          是
        </td>
      </tr>

      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          是
        </td>
      </tr>

      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          是
        </td>
      </tr>

      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          是
        </td>
      </tr>

      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          是
        </td>
      </tr>
      <tr>
        <td colspan="5" style="text-align: center">
          空白样品测定
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td>样品编号</td>
        <td>
          测定浓度(mg/L)
        </td>
        <td>
          质控要求(mg/L)
        </td>
        <td colspan="2">
          是否合格
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td colspan="5" style="text-align: center">
          标准样品测定
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td>样品编号</td>
        <td>
          测定浓度(mg/L)
        </td>
        <td>
          质控要求(mg/L)
        </td>
        <td colspan="2">
          是否合格
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>
      <tr>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.temperature"/>
        </td>
        <td colspan="2">
          是
        </td>
      </tr>

    </table>
  </el-card>
</template>

<style scoped lang="scss">

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 10px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
